<template>
  <div class="creat-blog">
    <!-- 模板容器 -->
    <mu-container>
      <!-- 控制表单样式，上、左、右 -->
      <!-- <mu-flex align-items="center" style="padding-bottom: 8px;">
        <span style="margin-right: 16px;">表单类型:</span>
        <mu-radio v-model="labelPosition" style="margin-right: 16px;" value="top" label="top"></mu-radio>
        <mu-radio v-model="labelPosition" style="margin-right: 16px;" value="left" label="left"></mu-radio>
        <mu-radio v-model="labelPosition" style="margin-right: 16px;" value="right" label="right"></mu-radio>
      </mu-flex> -->
      <!-- 表单容器 -->
      <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="200">
        <mu-form-item label="博客标题" help-text="帮助文字" prop="title" :rules="titleRules">
          <mu-text-field v-model="form.title" prop="title"></mu-text-field>
        </mu-form-item>
        <mu-form-item prop="textarea" label="博客内容">
          <mu-text-field multi-line :rows="3" :rows-max="6" v-model="form.content"></mu-text-field>
        </mu-form-item>
        <mu-form-item prop="select" label="语言">
          <mu-select v-model="form.lang">
            <mu-option v-for="(option, index) in options" :key="(option, index)" :label="option" :value="option"></mu-option>
          </mu-select>
        </mu-form-item>
        <mu-form-item prop="date" label="时间">
          <mu-date-input v-model="form.date" type="dateTime" actions></mu-date-input>
        </mu-form-item>
        <mu-form-item prop="radio" label="技术类型">
          <mu-radio v-model="form.type" value="Vue.js" label="Vue.js"></mu-radio>
          <mu-radio v-model="form.type" value="Node.js" label="Node.js"></mu-radio>
          <mu-radio v-model="form.type" value="React.js" label="React.js"></mu-radio>
          <mu-radio v-model="form.type" value="Angular.js" label="Angular.js"></mu-radio>
        </mu-form-item>
        <mu-form-item prop="checkbox" label="分享人">
          <mu-checkbox v-for="item in persons" :key="item" @click="checkPerson" v-model="form.person" :value="item" :label="item"></mu-checkbox>
        </mu-form-item>
        <mu-form-item prop="switch" label="这是一个开关(true/false)">
          <mu-switch v-model="form.switch"></mu-switch>
        </mu-form-item>
        <mu-form-item prop="slider" label="这是一个Slider(数字)">
          <mu-slider v-model="form.slider"></mu-slider>
        </mu-form-item>
        <mu-form-item>
          <mu-button color="primary" @click="submit">提交</mu-button>
          <mu-button @click="clearData">重置</mu-button>
        </mu-form-item>
      </mu-form>
      <!-- 提示框，这个东西后续要放到全局使用vuex来控制 -->

      <mu-dialog title="提示" width="360" :open.sync="openSimple">
        {{alertContent}}
        <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">确定</mu-button>
      </mu-dialog>
    </mu-container>

  </div>
</template>


<script>
import axios from "axios";
export default {
  name: "CreatBlog",
  data() {
    return {
      options: ["中文", "english"],
      persons: ["音乐鱼", "张三", "李四"],
      titleRules: [
        { validate: val => !!val, message: "必须填写标题" },
        { validate: val => val.length >= 3, message: "标题长度大于3" }
      ],
      sharePerson: "",
      labelPosition: "top",
      form: {
        title: "",
        lang: "",
        date: "",
        type: "",
        person: [],
        switch: false,
        slider: 30,
        content: ""
      },
      openSimple: false,
      alertContent: ""
    };
  },
  methods: {
    submit() {
      axios
        .post("https://wd4276888673xfbavi.wilddogio.com/blog.json", this.form)
        .then(response => {
          console.log(response);
          this.alertContent = "创建成功！";
          this.openSimple = true;
          this.clearData();
        })
        .catch(err => {
          console.log(err);
          this.alertContent = "请求失败！";
          this.openSimple = true;
        });
    },
    clearData() {
      this.form = {
        title: "",
        lang: "",
        date: "",
        type: "",
        person: [],
        switch: false,
        slider: 30,
        content: ""
      };
    },
    closeSimpleDialog() {
      this.openSimple = false;
    },
    checkPerson() {
      this.sharePerson = this.form.person.join("、");
    }
  }
};
</script>

<!-- 加 scoped 为组件局部样式，不加则为全局样式-->
<style scoped>
.title {
  padding: 5px;
}
</style>
